<!--
  ~ Copyright (c) 2024 Huawei Device Co., Ltd.
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
  <meta
          name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  />
  <title>购物车 - H5页面A</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      /* 设置根字体大小，针对高分辨率设备调整 */
      font-size: 16px;
      font-size: max(16px, min(4vw, 24px));
    }

    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
      padding: 1.25rem; /* 20px -> 1.25rem */
      background-color: #f5f5f5;
      line-height: 1.6;
      font-size: 1rem;
      min-height: 100vh;
    }

    .container {
      width: 100%;
      margin: 0 auto;
      background: white;
      border-radius: 1rem;
      padding: 1.5rem;
      box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
      min-height: calc(100vh - 2.5rem);
    }

    h1 {
      color: #333;
      text-align: center;
      margin-bottom: 1.25rem; /* 20px -> 1.25rem */
      font-size: 1.5rem; /* 24px -> 1.5rem */
    }

    .page-info {
      background: #e8f4ff;
      padding: 0.9375rem; /* 15px -> 0.9375rem */
      border-radius: 0.5rem; /* 8px -> 0.5rem */
      margin: 0.9375rem 0; /* 15px -> 0.9375rem */
      border-left: 0.25rem solid #007aff; /* 4px -> 0.25rem */
    }

    .page-info h3 {
      color: #007aff;
      margin-bottom: 0.5rem; /* 8px -> 0.5rem */
      font-size: 1.2rem;
    }

    .page-info p {
      color: #666;
      font-size: 1.2rem; /* 14px -> 0.875rem */
      margin: 0.3125rem 0; /* 5px -> 0.3125rem */
    }

    .params-info {
      background: #f0f9ff;
      padding: 0.75rem; /* 12px -> 0.75rem */
      border-radius: 0.375rem; /* 6px -> 0.375rem */
      margin: 0.625rem 0; /* 10px -> 0.625rem */
      font-family: monospace;
      font-size: 0.8rem; /* 12px -> 0.8rem */
      border: 0.0625rem solid #e0e0e0; /* 1px -> 0.0625rem */
      overflow-x: auto;
      line-height: 1.4;
    }

    .button-group {
      margin: 1.25rem 0; /* 20px -> 1.25rem */
    }

    .button {
      display: block;
      width: 100%;
      background: linear-gradient(135deg, #007aff, #0056d3);
      color: white;
      padding: 1.2rem 1.25rem; /* 15px 20px -> 1.2rem 1.25rem */
      border: none;
      border-radius: 0.5rem; /* 8px -> 0.5rem */
      margin: 0.75rem 0; /* 10px -> 0.75rem */
      font-size: 1.2rem; /* 16px -> 1.1rem */
      font-weight: 500;
      cursor: pointer;
      transition: all 0.3s ease;
      text-align: center;
      text-decoration: none;
      min-height: 3.5rem; /* 确保按钮有足够的点击区域 */
    }

    .button:hover {
      background: linear-gradient(135deg, #0056d3, #003d99);
      transform: translateY(-0.125rem); /* 2px -> 0.125rem */
      box-shadow: 0 0.25rem 0.9375rem rgba(0, 122, 255, 0.3);
    }

    .button:active {
      transform: translateY(0);
    }

    .button.secondary {
      background: linear-gradient(135deg, #ff6b35, #e55a2b);
    }

    .button.secondary:hover {
      background: linear-gradient(135deg, #e55a2b, #cc4d20);
    }

    .button.outline {
      background: transparent;
      color: #007aff;
      border: 0.125rem solid #007aff; /* 2px -> 0.125rem */
    }

    .button.outline:hover {
      background: #007aff;
      color: white;
    }

    .cart-items {
      margin: 1.25rem 0; /* 20px -> 1.25rem */
    }

    .cart-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.75rem; /* 12px -> 0.75rem */
      border-bottom: 0.0625rem solid #eee; /* 1px -> 0.0625rem */
      min-height: 3rem; /* 确保有足够的触摸区域 */
    }

    .cart-item:last-child {
      border-bottom: none;
    }

    .item-name {
      font-weight: 500;
      color: #333;
      font-size: 1.2rem;
    }

    .item-price {
      color: #ff6b35;
      font-weight: bold;
      font-size: 1.2rem;
    }

    .total {
      background: #f8f9fa;
      padding: 0.9375rem; /* 15px -> 0.9375rem */
      border-radius: 0.5rem; /* 8px -> 0.5rem */
      margin: 0.9375rem 0; /* 15px -> 0.9375rem */
      text-align: center;
      font-size: 1.2rem;
    }

    .total-amount {
      font-size: 1.375rem; /* 20px -> 1.375rem */
      font-weight: bold;
      color: #ff6b35;
    }

    .log {
      background: #f8f9fa;
      padding: 0.75rem; /* 10px -> 0.75rem */
      border-radius: 0.375rem; /* 6px -> 0.375rem */
      margin: 0.625rem 0; /* 10px -> 0.625rem */
      max-height: 14rem; /* 150px -> 9.375rem */
      overflow-y: auto;
      font-size: 1.2rem; /* 12px -> 0.8rem */
      color: #666;
      font-family: monospace;
      line-height: 1.4;
      border: 0.0625rem solid #e0e0e0;
    }

    /* 响应式设计 */
    @media screen and (max-width: 480px) {
      html {
        font-size: max(14px, 3.5vw);
      }

      body {
        padding: 1rem;
      }

      .container {
        padding: 1rem;
        border-radius: 0.5rem;
      }

      .cart-item {
        padding: 0.5rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
      }

      .item-price {
        align-self: flex-end;
      }
    }

    @media screen and (min-width: 768px) {
      html {
        font-size: max(18px, min(2.5vw, 20px));
      }
    }
  </style>
</head>
<body>
<div class="container">
  <h1>🛒 购物车</h1>

  <div class="page-info">
    <h3>页面信息</h3>
    <p>这是一个H5页面，运行在HMRouter的WebView容器中</p>
    <p>页面类型：<strong>H5页面A</strong></p>
    <p>协议URL：<strong>h5://shopping/cart</strong></p>
  </div>

  <div class="params-info">
    <strong>页面参数：</strong><br/>
    <span id="params">等待加载...</span>
  </div>

  <div class="cart-items">
    <div class="cart-item">
      <span class="item-name">鸿蒙开发教程</span>
      <span class="item-price">¥99.00</span>
    </div>
    <div class="cart-item">
      <span class="item-name">ArkTS进阶指南</span>
      <span class="item-price">¥149.00</span>
    </div>
    <div class="cart-item">
      <span class="item-name">WebView集成实战</span>
      <span class="item-price">¥89.00</span>
    </div>
  </div>

  <div class="total">
    <div>总计：<span class="total-amount">¥337.00</span></div>
  </div>

  <div class="button-group">
    <button class="button" onclick="goToNativePage()">🏠 跳转到ArkUI页面B</button>

    <button class="button secondary" onclick="goToH5PageB()">📱 跳转到H5页面B (活动详情)</button>

    <button class="button outline" onclick="goBack()">← 返回上一页</button>
  </div>

  <div class="log" id="log">
    <div>📝 操作日志：</div>
  </div>
</div>

<script>
  let logContainer = document.getElementById('log');

  // 日志记录函数
  function addLog(message) {
    const time = new Date().toLocaleTimeString();
    const logElement = document.createElement('div');
    logElement.textContent = `[${time}] ${message}`;
    logContainer.appendChild(logElement);
    logContainer.scrollTop = logContainer.scrollHeight;
  }

  // 等待HMRouter Bridge准备就绪
  window.onHMRouterReady = function (params) {
    document.getElementById('params').textContent = JSON.stringify(params, null, 2);
    addLog('HMRouter Bridge 已准备就绪');
    addLog(`接收到页面参数: ${JSON.stringify(params)}`);
    console.log('🎉 HMRouter Bridge 已准备就绪，页面参数：', params);
  };

  // 也可以通过事件监听
  window.addEventListener('hmrouterready', function (event) {
    addLog('收到 hmrouterready 事件');
    console.log('📡 收到 hmrouterready 事件:', event.detail);
  });

  // 跳转到ArkUI页面B
  function goToNativePage() {
    if (window.HMRouterBridge) {
      const params = {
        from: 'h5_cart',
        timestamp: Date.now(),
        cartTotal: 337.0,
      };
      addLog(`准备跳转到ArkUI页面B，参数: ${JSON.stringify(params)}`);
      window.HMRouterBridge.push('NativePageB', params);
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 跳转到H5页面B
  function goToH5PageB() {
    if (window.HMRouterBridge) {
      const params = {
        productId: '12345',
        from: 'cart',
        recommendedItems: ['item1', 'item2', 'item3'],
      };
      addLog(`准备跳转到H5页面B，参数: ${JSON.stringify(params)}`);
      window.HMRouterBridge.push('h5://activity/detail', params);
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 返回上一页
  function goBack() {
    if (window.HMRouterBridge) {
      addLog('准备返回上一页');
      window.HMRouterBridge.pop();
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      alert('HMRouter Bridge 未准备就绪，请稍后再试');
    }
  }

  // 获取参数的示例
  function getCurrentParams() {
    if (window.HMRouterBridge) {
      const params = window.HMRouterBridge.getParams();
      addLog(`当前页面参数: ${JSON.stringify(params)}`);
      return params;
    } else {
      addLog('❌ HMRouter Bridge 未准备就绪');
      return {};
    }
  }

  // 页面加载完成
  document.addEventListener('DOMContentLoaded', function () {
    addLog('📄 页面DOM加载完成');
  });

  // 页面可见性改变
  document.addEventListener('visibilitychange', function () {
    if (document.visibilityState === 'visible') {
      addLog('👁️ 页面变为可见');
    } else {
      addLog('🙈 页面变为隐藏');
    }
  });

  // 错误处理
  window.addEventListener('error', function (e) {
    addLog(`❌ JavaScript错误: ${e.message}`);
    console.error('JavaScript错误:', e);
  });

  // 初始化日志
  addLog('🚀 购物车页面开始初始化');
</script>
</body>
</html>
